<template>
    <div class="discount_coupon">
        <div class="discount_coupon_list">
            <dl v-for="(item, key) in showCouponList" :key="key">
                <dt>
                    <span class="">{{item.couponMoney == '101' ? '闪问免费' : '￥' + item.couponMoney}}</span>
                    <i class="icon iconfont icon-tabshouqi"></i>
                </dt>
                <dd>
                    <h3>{{item.couponDes ? item.couponDes : '优惠券'}}</h3>
                    <p class="price">
                        {{item.couponName}}
                        <i class="icon iconfont icon-zhongyaotishi f30" @click="hint(true)"></i>
                    </p>
                    <p class="time">
                        有效期至:{{item.validEndTime}}
                    </p>
                    <span @click="employ(item.couponType)">立即使用</span>
                </dd>
            </dl>
            <blank v-if="isblank" :title="'暂无优惠券'"></blank>
        </div>
        <div class="reminder" v-if="ifMask">
            <div class="mask">
                <h3 class="f30">优惠券使用细则</h3>
                <ol>
                    <li class="f26">线上咨询、闪问、闪答可用（商城商品、线下约见及教育课程除外），有效期至领取之日起30天。</li>
                    <li class="f26">每次咨询最多使用一张优惠券，不可叠加使用。</li>
                    <li class="f26">在参与活动过程中，如发现违规行为（包含但不限于恶意批量注册、无效手机、虚假信息等）将封停账号。</li>
                </ol>
                <button class="btn" @click="hint(false)">关闭</button>
            </div>
        </div>
    </div>
</template>

<script>
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'discountCoupon',
        components: {
            blank
        },
        data() {
            return {
                ifMask: false,
                showCouponList: [],
                isblank: false,
            }
        },
        methods: {
            hint(bool) {
                this.ifMask = bool
            },
            showCoupon() {
                let params = {
                    userId: this.$store.state.userId,
                }
                this.$http.fetchGet('showCoupon', params).then(res => {
                    if(res.code == 200) {
                        this.showCouponList = res.data
                        if(this.showCouponList.length <= 0) {
                            this.isblank = true
                        } else {
                            this.isblank = false
                        }
                    } else {
                        console.log(res)
                    }
                }, err => {
                    console.log(err)
                })
            },
            employ(type) {
                if(type[0] == "3") {
                    this.$router.push({
                        path: '/masters',
                    })
                } else if(type[0] == "1") {
                    this.$router.push({
                        path: '/interact',
                    })
                } else if(type[0] == '2') {
                    this.$router.push({
                        path: '/interact/asked',
                    })
                }
            }
        },
        mounted() {
            this.showCoupon()
        }
    }
</script>

<style lang="less" scoped>
    .discount_coupon{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        .discount_coupon_list{
            width: 100%;
            box-sizing: border-box;
            .padd(20, 20);
            dl{
                display: flex;
                .h(224);
                background: #f2f2f2;
                .mb(20);
                dt{
                    .w(216);
                    .h(224);
                    position: relative;
                    span{
                        display: block;
                        background: #1A8EBF;
                        .h(224);
                        .lh(224);
                        text-align: center;
                        font-size: 24px;
                        color: #fff;
                    }
                    i{
                        position: absolute;
                        right: -10px;
                        top: 20px;
                        font-size: 30px;
                        color: #f2f2f2;
                        transform: rotateZ(-90deg);
                    }
                }
                dd{
                    flex: 1;
                    .p(20);
                    position: relative;
                    h3{
                        .lh(80);
                    }
                    .price{
                        .lh(50);
                        i.icon{
                            color: #1A8EBF
                        }
                    }
                    .time{
                        .lh(50);
                    }
                    span{
                        position: absolute;
                        top: 50%;
                        right: 10px;
                        transform: translateY(-50%);
                        border: 1px solid #1A8EBF;
                        color: #1A8EBF;
                        .w(130);
                        .h(40);
                        .lh(40);
                        text-align: center;
                        border-radius: 10px;
                    }
                }
                &:nth-child(2n){
                    dt{
                        span{
                            background: #EAA83A;
                        }
                    }
                }
            }
        }
        .reminder{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            .mask{
                .w(620);
                .h(600);
                background: #fff;
                border-radius: 5px;
                .padd(0, 60);
                .pt(20);
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                h3{
                    .lh(80);
                    text-align: center;
                    color: #333;
                    font-weight: normal;
                }
                ol{
                    list-style-type:decimal;
                    li{ 
                        list-style-position:outside;
                        .lh(42);
                    }
                }
                .btn{
                    .w(380);
                    .h(70);
                    color: #189BEB;
                    border: none;
                    border: 1px solid #189BEB;
                    border-radius: 5px;
                    background: #fff;
                    position: absolute;
                    bottom: 25px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
</style>
